<template>
	<view class="change-box">
		<!-- 换箱 -->
		<view class="top">
			<!-- 顶部箱子编号 -->
			<view class="top-box">
				<view class="top-box-nav active" data-text="1-20">
					1-20
				</view>
				<view class="top-box-nav">
					21-40
				</view>
				<view class="top-box-nav">
					41-60
				</view>
			</view>
			<!-- 切换顺序 -->
			<view class="top-check">
				<!--
					在two-arrow的基础上 active
						上箭头选中 添加before类
						下箭头选中 添加after类
				-->
				<text class="two-arrow"
					:class="{'active':restChoose,'before':restChooseDefault,'after':!restChooseDefault}"
					@click="chooseRest">余量</text>
				<text class="two-arrow"
					:class="{'active':boxChoose,'before':boxChooseDefault,'after':!boxChooseDefault}"
					@click="chooseBox">箱号</text>
			</view>
		</view>

		<!-- 箱子列表 -->
		<view class="box">
			<!-- 单个箱子 -->
			<view class="box-item" data-text="第1箱">
				<!-- 左侧剩余数 -->
				<view class="box-item-left">
					<image :src="imageUrl('change-box-blue.png')" mode="" class="box-item-left-pic" />
					<view class="box-item-left-rest">
						剩余32
					</view>
				</view>
				<!-- 右侧列表 -->
				<view class="box-item-right">
					<view class="box-item-right-item">
						first赏：1/1
					</view>
					<view class="box-item-right-item">
						last赏：1/1
					</view>
					<view class="box-item-right-item">
						全局赏：1/1
					</view>
					<view class="box-item-right-item">
						A赏：1/10
					</view>
					<view class="box-item-right-item">
						B赏：1/10
					</view>
					<view class="box-item-right-item">
						C赏：1/100
					</view>
					<view class="box-item-right-item">
						D赏：1/100
					</view>
					<view class="box-item-right-item">
						E赏：1/100
					</view>
				</view>
			</view>
			<view class="box-item" data-text="第2箱">
				<!-- 左侧剩余数 -->
				<view class="box-item-left">
					<image :src="imageUrl('change-box-blue.png')" mode="" class="box-item-left-pic" />
					<view class="box-item-left-rest">
						剩余32
					</view>
				</view>
				<!-- 右侧列表 -->
				<view class="box-item-right">
					<view class="box-item-right-item">
						first赏：1/1
					</view>
					<view class="box-item-right-item">
						last赏：1/1
					</view>
					<view class="box-item-right-item">
						全局赏：1/1
					</view>
					<view class="box-item-right-item">
						A赏：1/10
					</view>
					<view class="box-item-right-item">
						B赏：1/10
					</view>
					<view class="box-item-right-item">
						C赏：1/100
					</view>
					<view class="box-item-right-item">
						D赏：1/100
					</view>
					<view class="box-item-right-item">
						E赏：1/100
					</view>
					<view class="box-item-right-item">
						F赏：1/100
					</view>
					<view class="box-item-right-item">
						G赏：1/100
					</view>
					<view class="box-item-right-item">
						H赏：1/100
					</view>
					<view class="box-item-right-item">
						H赏：1/100
					</view>
					<view class="box-item-right-item">
						H赏：1/100
					</view>
				</view>
			</view>
			<view class="box-item" data-text="第3箱">
				<image :src="imageUrl('change-box-sellall.png')" mode="" class="no-one-bg" v-if="true" />
				<!-- 左侧剩余数 -->
				<view class="box-item-left">
					<image :src="imageUrl('change-box-blue.png')" mode="" class="box-item-left-pic" />
					<view class="box-item-left-rest">
						剩余32
					</view>
				</view>
				<!-- 右侧列表 -->
				<view class="box-item-right">
					<view class="box-item-right-item">
						first赏：1/1
					</view>
					<view class="box-item-right-item">
						last赏：1/1
					</view>
					<view class="box-item-right-item">
						全局赏：1/1
					</view>
					<view class="box-item-right-item">
						A赏：1/10
					</view>
					<view class="box-item-right-item">
						B赏：1/10
					</view>
					<view class="box-item-right-item">
						C赏：1/100
					</view>
				</view>
			</view>
			<view class="box-item" data-text="第4箱">
				<!-- 左侧剩余数 -->
				<view class="box-item-left">
					<image :src="imageUrl('change-box-blue.png')" mode="" class="box-item-left-pic" />
					<view class="box-item-left-rest">
						剩余32
					</view>
				</view>
				<!-- 右侧列表 -->
				<view class="box-item-right">
					<view class="box-item-right-item">
						first赏：1/1
					</view>
					<view class="box-item-right-item">
						last赏：1/1
					</view>
					<view class="box-item-right-item">
						全局赏：1/1
					</view>
					<view class="box-item-right-item">
						A赏：1/10
					</view>
					<view class="box-item-right-item">
						B赏：1/10
					</view>
					<view class="box-item-right-item">
						C赏：1/100
					</view>
					<view class="box-item-right-item">
						D赏：1/10
					</view>
					<view class="box-item-right-item">
						E赏：1/100
					</view>
				</view>
			</view>
			<view class="box-item" data-text="第5箱">
				<!-- 左侧剩余数 -->
				<view class="box-item-left">
					<image :src="imageUrl('change-box-blue.png')" mode="" class="box-item-left-pic" />
					<view class="box-item-left-rest">
						剩余32
					</view>
				</view>
				<!-- 右侧列表 -->
				<view class="box-item-right">
					<view class="box-item-right-item">
						first赏：1/1
					</view>
					<view class="box-item-right-item">
						last赏：1/1
					</view>
					<view class="box-item-right-item">
						全局赏：1/1
					</view>
					<view class="box-item-right-item">
						A赏：1/10
					</view>
					<view class="box-item-right-item">
						B赏：1/10
					</view>
					<view class="box-item-right-item">
						C赏：1/100
					</view>
					<view class="box-item-right-item">
						D赏：1/10
					</view>
					<view class="box-item-right-item">
						E赏：1/100
					</view>
				</view>
			</view>
		</view>

		<!-- 悬浮按钮 showGoTop showRefresh -->
		<HoverBtns @refresh="refresh" />
	</view>
</template>

<script>
	import HoverBtns from '@/components/common/HoverBtns.vue'
	export default {
		components: {
			HoverBtns
		},
		data() {
			return {
				// 余量
				restChoose: false,
				// 余量升序
				restChooseDefault: false,
				// 箱号
				boxChoose: false,
				// 箱号升序
				boxChooseDefault: false,
			}
		},
		methods: {
			// 选中余量
			chooseRest() {
				this.boxChoose = false
				this.restChoose = true
				this.restChooseDefault = !this.restChooseDefault
			},
			// 选中箱号
			chooseBox() {
				this.restChoose = false
				this.boxChoose = true
				this.boxChooseDefault = !this.boxChooseDefault
			},
			// 刷新数据
			refresh() {
				console.log('refresh')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #0A0A0A;
	}

	.change-box {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #fff;

		.top {
			// 吸顶
			position: sticky;
			top: 0;
			z-index: 99;
			background: #0A0A0A;

			// 顶部箱子编号
			&-box {
				display: flex;
				padding: 20rpx 30rpx;

				&-nav {
					margin-right: 64rpx;
					font-family: YouSheBiaoTiHei;
					font-size: 48rpx;
					line-height: 48rpx;
					color: rgba(255, 255, 255, .5);

					&.active {
						color: #48FFFD;
						position: relative;
						z-index: 0;

						&::before {
							content: attr(data-text);
							position: absolute;
							left: 0;
							z-index: -1;
							-webkit-text-stroke: 16rpx #fff;
						}

						&::after {
							content: attr(data-text);
							position: absolute;
							left: 0;
							z-index: -1;
							-webkit-text-stroke: 8rpx #1C1C1C;
						}
					}
				}
			}

			// 切换顺序
			&-check {
				display: flex;
				justify-content: space-evenly;
				padding-bottom: 20rpx;

				>text {
					// 子绝父相 定位箭头
					position: relative;

					// 上箭头
					&.two-arrow::before {
						position: absolute;
						top: 0;
						right: -14rpx;
						content: '';
						display: inline-block;
						width: 0;
						height: 0;
						border: 6rpx solid #fff;
						border-top-color: transparent;
						border-bottom-color: #fff;
						border-right-color: transparent;
						border-left-color: transparent;
					}

					// 下箭头
					&.two-arrow::after {
						position: absolute;
						right: -14rpx;
						bottom: -2rpx;
						content: '';
						display: inline-block;
						width: 0;
						height: 0;
						border: 6rpx solid #fff;
						border-top-color: #fff;
						border-bottom-color: transparent;
						border-right-color: transparent;
						border-left-color: transparent;
					}

					// 选中字体变色
					&.active {
						color: #48FFFD;

						// 上箭头选中
						&.two-arrow {
							&.before::before {
								border-bottom-color: #48FFFD;
							}
						}

						// 下箭头选中
						&.two-arrow {
							&.after::after {
								border-top-color: #48FFFD;
							}
						}
					}
				}
			}
		}

		.box {
			width: 100vw;
			padding: 18rpx 30rpx;
			box-sizing: border-box;

			&-item {
				position: relative;
				display: flex;
				width: 690rpx;
				padding: 40rpx 34rpx;
				margin-bottom: 18rpx;
				border-radius: 16rpx;
				background: #1C1C1C;
				box-sizing: border-box;

				// 已售罄
				.no-one-bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				// 左上角的箱数
				&::before {
					position: absolute;
					top: 0;
					left: 0;
					content: attr(data-text);
					display: inline-block;
					width: 110rpx;
					height: 44rpx;
					background: rgba(255, 255, 255, .1);
					border-radius: 16rpx 0 16rpx;
					text-align: center;
					line-height: 44rpx;
				}

				// 左侧剩余数量
				&-left {
					margin: auto;

					&-pic {
						display: block;
						width: 84rpx;
						height: 84rpx;
						margin: 0 auto;
					}

					&-rest {
						width: 110rpx;
						height: 44rpx;
						background: rgba(255, 255, 255, .1);
						border-radius: 8rpx;
						margin-top: 12rpx;
						text-align: center;
						line-height: 44rpx;
					}
				}

				&-right {
					display: flex;
					flex-wrap: wrap;
					// width: 800rpx;
					padding-left: 32rpx;

					&-item {
						width: 160rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>
